<template>
  <div class="gamemy-list-wrapper">
    <div class="hbox" v-for="(item,index) in gameList" @click="_clickRow(item)">
      <div class="hbox-row row-1">
        <div class="hbox-row-item">
          <div class="official-game-icon" v-if='item.GAME_TYPE == "NETDS" || item.GAME_TYPE == ""'>排名赛</div>
          <div class="team-game-icon" v-else-if='item.GAME_TYPE == "TDS"'>团队赛</div>
          <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "CLS"'>超级赛</div>
          <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "JYS"'>精英赛</div>
          <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "QGS"'>全国赛</div>
          <div class="official-game-icon" v-else-if='item.GAME_KIND == "1"'>官方</div>
        </div>
        <div class="hbox-row-item"></div>
        <div class="hbox-row-item">
          <div class="game_name">{{ item.GAME_NAME }}</div>
          <div class="game_time">{{item.FORMAT_BEGIN_DATE}}-{{item.FORMAT_END_DATE}}
          </div>
        </div>
        <div class="hbox-row-item">
        </div>
        <div class="hbox-row-item">
        </div>
      </div>

      <div class="hbox-row row-2">
        <div class="hbox-row-item col-game-1">
          <span class="arrow1">&#9670;</span>
          <span class="arrow2">&#9670;</span>
        </div>

        <div class="hbox-row-item col-game-2">
          <div>参加人数</div>
          <div v-if="item.BEGIN_DATE <= dateNow && item.GAME_ATTEND_PERSON == item.GAME_MAX_LIMIT">
            <span class="player_num">{{ item.GAME_ATTEND_PERSON }}</span>
          </div>
          <div v-else :class="item.GAME_MAX_LIMIT>9999?'bigLimit':''">
            <span class="player_num">{{ item.GAME_ATTEND_PERSON }}</span><span class="total_num">/{{ item.GAME_MAX_LIMIT }}</span>
          </div>
        </div>

        <div class="hbox-row-item col-game-3">
          <div v-if="item.GAME_STEP < 3 && dateNow < item.BEGIN_DATE" class="time_closing" v-text="item.timeClosing"></div>
          <template v-else-if="item.GAME_STEP == 3 || item.GAME_STEP == 4">
            <div>我的排名</div>
            <div v-text="item.ranknum <= 0?'--':item.ranknum" class="rank"></div>
          </template>
          <div v-else-if="item.DELETE == 1" class="color-gray">比赛已删除</div>
          <div v-else-if="item.GAME_STATUS !=1 || item.GAME_STEP == 5" class="color-gray">审核未通过</div>
        </div>

        <div class="hbox-row-item col-game-4">
          <div v-if="item.DELETE == 1 || item.GAME_STEP == 5 ">比赛失效</div>
          <div v-else-if="item.GAME_STATUS == 0" class="blue">待审核</div>
          <div v-else-if="item.GAME_STATUS == 2" class="blue">审核中</div>
          <div v-else-if="item.GAME_STEP == 0" class="blue">未开放报名</div>
          <div v-else-if="item.GAME_STEP == 1" class="blue">报名中</div>
          <div v-else-if="item.GAME_STEP == 2" class="blue">报名结束</div>
          <div v-else-if="item.GAME_STEP == 3" class="red">进行中</div>
          <div v-else-if="item.GAME_STEP == 4">已结束</div>
        </div>
        <div class="hbox-row-item col-game-5">
          <i class="iconfont icon-xiangyou"></i>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'

  export default {
    data(){
      return {
        dateNow: '',
        timeNow: '',
        baseDateTime: '',
        index: 0,
        timeschel: ''
      }
    },
    props: {
      gameList: {
        type: Array
      }
    },
    mounted: function () {
      this.timeNow = Number(CommonUtil.getTodayFormatTime());
      this.dateNow = Number(CommonUtil.getTodayFormatDate());
      this._countdownTime();
    },
    beforeDestroy: function () {
      clearInterval(this.timeschel);
    },
    methods: {
      _countdownTime(){
        var self = this;
        RemoteDAO.callGT1008(function (response) {
          if (response.error == "0") {
            self.timeNow = response.data.body.time;
            self.dateNow = response.data.body.date;
          }
          var time1 = (CommonUtil.formatDate(self.dateNow) + " " + CommonUtil.formatTime(self.timeNow)).toString();
          self.baseDateTime = new Date(time1.replace(/-/g, "/")); // 1991/11/11 11：11:12 兼容各浏览器的new Date()

          self.timeschel = setInterval(function () {
            if (typeof self.index === "undefined") {
              self.index = 0;
            }
            ;
            _.each(self.gameList, function (item, index) {
              if (item.GAME_STEP < 3) {
                var beginDate = item.BEGIN_DATE;
                var time2 = (CommonUtil.formatDate(beginDate) + " 00:00:00").toString();
                var endTime = new Date(time2.replace(/-/g, "/")); // 比赛开始时间
                var nowTime = self.baseDateTime;
                var t = endTime.getTime() - nowTime.getTime() - 1000 * self.index;
                var d = 0, h = 0, m = 0, s = 0;
                if (t >= 0) {
                  d = Math.floor(t / 1000 / 60 / 60 / 24);
                  h = Math.floor(t / 1000 / 60 / 60 % 24);
                  m = Math.floor(t / 1000 / 60 % 60);
                  s = Math.floor(t / 1000 % 60);
                }
                if (h < 10) {
                  h = "0" + h;
                }
                if (m < 10) {
                  m = "0" + m;
                }
                if (s < 10) {
                  s = "0" + s;
                }
                item.timeClosing = d + "天" + h + ":" + m + ":" + s;
              }
            });
            self.index++;
          }, 1000);
        });
      },
      _clickRow(item){
        this.$router.push({
          path: '/game/gamedetail', query: {
            gameId: item.GAME_ID,
            gameName: item.GAME_NAME,
            gameMaxLimit: item.GAME_MAX_LIMIT,
            gameAttendPerson: item.GAME_ATTEND_PERSON,
            createUser: item.CREATE_USER,
            joinBeginDate: item.JOIN_BEGIN_DATE,
            joinEndDate: item.JOIN_END_DATE,
            beginDate: item.BEGIN_DATE,
            endDate: item.END_DATE
          }
        });
      }
    }
  }

</script>

<style lang="css" scoped>

</style>
